<template>
    <!-- 
        1.dialog的显示与否是通过 :visible.sync的值来控制的
        2.close-on-click-modal="false"控制点击遮罩是否隐藏弹出层；
    -->
    <el-dialog title="删除用户" width="560px" :visible.sync="delDeptDialogVisible" :close-on-click-modal="false">
        <!-- rules表示绑定我们自定义的规则 -->
        <span>你确定要删除？</span>
        <div slot="footer" class="dialog-footer">
            <el-button @click="() => delDeptDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureEdit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
// import axios from 'axios'
import http from '@/utils/request.js'
export default {
    data() {
        return {
            // editUserDialogVisible是用来控制弹出框是否显示, false表示不显示；true表示显示
           delDeptDialogVisible: false,
            editUser: {},
            // 定义校验规则
            rules: {
                name: [
                    // required表示该值必须要填；message 表示违反规则的提示信息；trigger表示何时出发
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮件', trigger: 'blur' },
                    /**
                     * ^: 表示以X开头
                     * \w: a-zA-Z_0-9
                     * []: 表示中间的内容任选一个
                     * [-\w]{2,7}: 表示数字、字母、_、-出现的次数在2到7之间
                     * \.: 表示 “.” 的意思
                     * \d: 表示数字
                     * $: 表示必须以这些内容结尾
                     */
                    { pattern: /^\w[-\w]{2,7}@[0-9A-Za-z]{2,6}\.[\dA-Za-z]{2,6}$/, 
                        message: '邮件不符合规则', trigger: 'blur'}
                ],
                birthday: [
                    { required: true, message: '请输入生日', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        // 根据id查询，然后回显数据
        getById(id) {
            http.get(`user/${id}`).then(res => {
                // res.data 就是用户数据
                this.editUser = res.data
            }) 
            /**
            axios.get(`http://localhost:8082/user/${id}`).then(res => {
                // res.data 就是用户数据
                this.editUser = res.data
            }) 
            */
        },
        // 用户确认编辑
        async sureEdit() {
            /**
             * 1.this.$refs.editForm.validate() 表示对表单使用定义的规则进行验证；
             * 2.this.$refs['editForm']， this.$refs是个对象，对象的另外一种取值方式 对象[属性]
             * 3. valid是校验的结果, 值是 true | false, true表示校验通过；false表示校验不通过；
             */
            /** 这种写法面临着一个回调地狱问题
            this.$refs.editForm.validate(valid => {
                // 如果valid为true, 表示校验通过
                if(valid) {
                    axios.put('url', this.editUser)
                        .then(res => {

                        })
                }
            })
            */
            try {
                // 通过await的方式校验表单的时候，如果校验不通过，this.$refs.editForm.validate()
                // 会抛出异常
                await this.$refs.editForm.validate()
                // 代码如果能走下来，表示校验通过
                await http.put(`user`, this.editUser)
                // 编辑成功的提示消息
                this.$message({ message: '编辑成功', type: 'success', duration: 1000})
                // 隐藏模态框
                this.editUserDialogVisible = false
                // 重新查询数据
                this.$emit('refresh')
            }catch(err) {
                console.log(err);
            }
        }
    }
}
</script>

<style>

</style>